﻿/*
* 名称: jQSpinner
* 版本: 1.0.0
* 日期: 2017-01-14
* 依赖: jQuery v1.7 以上
* 作者: Conan     email:wensui3#163.com
* 样式: liuhuan
* 
* 参考: 博客园 Jericho 的文章及 Demo （http://www.cnblogs.com/fromearth/archive/2009/07/08/1519054.html）
               Jericho [ thisnamemeansnothing[at]gmail.com ] 
* 用法:
        var slider = $.fn.jQSlider({...});
        slider.setValue(value);
        slider.getValue();
* 
*/
(function ($) {
    $.extend($.fn, {
        jQSpinner: function (setting) {
            var ps = $.extend({
                //要渲染的对象，可以为 jquery 选择器，也可以为 jquery 对象
                renderTo: $(document.body),
                //是否能被拖动
                enable: true,
                initValue: 0,
                //显示的最大值，如10、50、100，最小默认为0，总范围0-10、0-100
                maxValue: 100,
                //可滑动的最小值
                minValue: 0,
                //每次点击变化的值
                changeValue:1
            }, setting);
			//获取到要渲染的对象
            ps.renderTo = (typeof ps.renderTo == 'string' ? $(ps.renderTo) : ps.renderTo);
			ps.renderTo.css({position:'relative',height:'24px',width:'86px'});
            /*
            <div class="control-input">
                <input type="text" class="number-input" value="1" />
                <span class="number-control">
                    <span class="number-down number-disabled dn"><i class="number-arrow"></i></span>
                    <span class="number-down number-add"><i class="number-arrow"></i></span>
                    <span class="number-up number-cut"><i class="number-arrow"></i></span>
                    <span class="number-up number-disabled dn"><i class="number-arrow"></i></span>
                </span>
            </div>
            */
			//创建 dom 并添加至被渲染对象
            var inputdiv = $('<div class="control-input"><input type="text" class="number-input" /><span class="number-control"><span class="number-down number-disabled dn"><i class="number-arrow"></i></span><span class="number-down number-add"><i class="number-arrow"></i></span><span class="number-up number-cut"><i class="number-arrow"></i></span><span class="number-up number-disabled dn"><i class="number-arrow"></i></span></span></div>').css('left', ps.width + 10).appendTo(ps.renderTo);
			//输入框对象
            var inputwrap = inputdiv.find('.number-input');
			//加
            var numberadd = inputdiv.find('.number-add');
			//禁用 加
            var numberaddDisabled = inputdiv.find('.number-down.number-disabled');
			//减
            var numbercut = inputdiv.find('.number-cut');
			//禁用 减
            var numbercutDisabled = inputdiv.find('.number-up.number-disabled');
			//给输入框加个id
            if (ps.renderTo.attr('id') != '') {
                inputwrap.attr('id', ps.renderTo.attr('id') + '_input');
            }
			//设置默认值
            inputwrap.val(ps.initValue).attr('oldValue', ps.initValue);
			if (ps.initValue <= ps.minValue) {
				inputwrap.val(ps.minValue);
				numbercut.hide();
				numbercutDisabled.show();
            } else if (ps.initValue >= ps.maxValue) {
				inputwrap.val(ps.maxValue);
				numberadd.hide();
				numberaddDisabled.show();

            } else {
				numberadd.show();
				numbercut.show();
				numberaddDisabled.hide();
				numbercutDisabled.hide();

            }

            if (ps.enable) {
                numberadd.on('click', function (e) {
                    inputwrap.val(parseInt(inputwrap.val()) + ps.changeValue).blur();
                });
                numbercut.on('click', function (e) {
                    inputwrap.val(parseInt(inputwrap.val()) - ps.changeValue).blur();
                });
                inputwrap.on('blur', function (e) {
                    var val = parseInt(inputwrap.val());
                    if (val <= ps.minValue) {
                        inputwrap.val(ps.minValue);
                        numbercut.hide();
                        numbercutDisabled.show();
                    } else if (val >= ps.maxValue) {
                        inputwrap.val(ps.maxValue);
                        numberadd.hide();
                        numberaddDisabled.show();
                    } else {
                        numberadd.show();
                        numbercut.show();
                        numberaddDisabled.hide();
                        numbercutDisabled.hide();
                    }
                    reg = /^[0-9]*$/;//非零正整数
                    if (!reg.test(inputwrap.val())) {
                        //输入非法
                        inputwrap.val(inputwrap.attr('oldValue'));
                    } else {
                        //输入正确
                        inputdiv.attr('oldValue', val);
                    }
                }).on('focus', function () {
                    inputwrap.select();
                }).on('keydown', function (e) {
                    if (e.keyCode == 13) {
                        inputwrap.blur();
                    }
                })
            } else {
                inputwrap.attr('disabled', 'disabled');
            }
            return inputwrap;
        },
        setValue: function (val) {
            this.val(val).blur();
        },
        getValue: function () {
            return this.val();
        }
    });
})(jQuery);